// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, TextInput, InteractionManager, KeyboardAvoidingView } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { InputItem, Tabs, Toast, Portal, List, Picker } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { region } from '../../module/module.js'

// 引入样式
import Styles from './style.js';

// 引入公用组件
import { Radio } from '../../components/index.js'

// 引入工具包
import { press, size, ScreenWidth, borderBottom, hotTextColor, validation, borderColor, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'
class InvoicesForm extends Component {

	constructor(props) {
		super(props)
		this.state = {
			bankAccount: '', //银行账号
			depositBank: '', //开户银行
			invoiceRise: 1, //发票抬头：1:个人，2:单位
			isDefault: false, //是否默认：1默认，0非默认
			name: '', //个人名称/单位名称
			regAddress: '', //注册地址
			regPhone: '', //注册电话
			taxNumber: '', //纳税人识别号
			type: 1, //发票类型：1:电子普通发票，2:纸质普通发票
		}
	}

	componentDidMount() {
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.details) {
			this.setState({
				bankAccount: nextProps.details.bankAccount,
				depositBank: nextProps.details.depositBank,
				invoiceRise: nextProps.details.invoiceRise,
				isDefault: nextProps.details.isDefault,
				name: nextProps.details.name,
				regAddress: nextProps.details.regAddress,
				regPhone: nextProps.details.regPhone,
				taxNumber: nextProps.details.taxNumber,
				type: nextProps.details.type,
			})
		}
	}

	hanfleOnPress() {
		const { onPress } = this.props
		const { bankAccount, depositBank, invoiceRise, isDefault, name, regAddress, regPhone, taxNumber, type, } = this.state
		if (!invoiceRise) {
			Toast.info('请选择发票抬头', 1, null, false);
			return
		}
		if (!name) {
			Toast.info('请选择发票类型', 1, null, false);
			return
		}
		if (!taxNumber) {
			Toast.info('请输入纳税人识别号', 1, null, false);
			return
		}
		console.log(this.state)
		onPress({
			bankAccount, depositBank, invoiceRise, isDefault: isDefault ? 1 : 0, name, regAddress, regPhone, taxNumber, type
		})
	}

	render() {
		const { bankAccount, depositBank, invoiceRise, isDefault, name, regAddress, regPhone, taxNumber, type, } = this.state
		return (
			<ScrollView style={{ flex: 1, paddingBottom: 20 }}>
				<KeyboardAvoidingView behavior="padding" enabled>
					<View style={{ paddingLeft: 15 }}>
						<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>发票类型</Text>
					</View>
					<View style={{ flexDirection: 'row', alignItems: 'center', }}>
						<TouchableOpacity
							onPress={() => {
								this.setState({
									type: 1
								})
							}}
							style={[{
								paddingVertical: 14,
								paddingHorizontal: 20,
								backgroundColor: borderColor,
								borderRadius: 6,
								alignItems: 'center',
								justifyContent: 'center',
								flex: 1,
								margin: 15,
							}, type == 1 ? { backgroundColor: hotTextColor, } : null]}
						>
							<Text style={{ fontSize: size(28), color: '#fff', lineHeight: size(30), }}>电子普通发票</Text>
						</TouchableOpacity>
						<TouchableOpacity
							onPress={() => {
								this.setState({
									type: 2
								})
							}}
							style={[{
								paddingVertical: 14,
								paddingHorizontal: 20,
								backgroundColor: borderColor,
								borderRadius: 6,
								alignItems: 'center',
								justifyContent: 'center',
								flex: 1,
								margin: 15,
							}, type == 2 ? { backgroundColor: hotTextColor, } : null]}
						>
							<Text style={{ fontSize: size(28), color: '#fff', lineHeight: size(30), }}>纸质普通发票</Text>
						</TouchableOpacity>
					</View>
					<View style={{ paddingLeft: 15 }}>
						<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>电子发票即电子增值税发票，是税务局认可的有效凭证，其法律效力、基本用途及使用规定同纸质发票。</Text>
					</View>
					<View style={{ paddingLeft: 15 }}>
						<Picker
							data={[
								{ label: '个人', value: '1' },
								{ label: '单位', value: '2' },
							]}
							cols={1}
							value={invoiceRise}
							onChange={(value) => {
								this.setState({
									invoiceRise: value[0],
								})
							}}
						>
							<TouchableOpacity style={{
								height: 50,
								padding: 0,
								paddingRight: 15,
								...borderBottom()
							}}>
								{invoiceRise == 1 && <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 50, }}>个人</Text>}
								{invoiceRise == 2 && <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 50, }}>单位</Text>}
							</TouchableOpacity>
						</Picker>
						<TextInput
							onChangeText={(value) => {
								this.setState({ name: value })
							}}
							placeholder="单位名称"
							value={name}
							placeholderTextColor="#61676F"
							style={{
								paddingTop: 15,
								paddingBottom: 15,
								padding: 0,
								paddingRight: 15,
								color: '#333',
								fontSize: 14,
								...borderBottom()
							}}
							underlineColorAndroid="transparent"
						/>
						<TextInput
							onChangeText={(value) => this.setState({ taxNumber: value })}
							placeholder="纳税人识别码"
							value={taxNumber}
							placeholderTextColor="#61676F"
							style={{
								paddingTop: 15,
								paddingBottom: 15,
								padding: 0,
								paddingRight: 15,
								color: '#333',
								fontSize: 14,
								...borderBottom()
							}}
							underlineColorAndroid="transparent"
						/>
						<TextInput
							onChangeText={(value) => this.setState({ regPhone: value })}
							keyboardType="numeric"
							placeholder="注册电话"
							value={regPhone}
							placeholderTextColor="#61676F"
							style={{
								paddingTop: 15,
								paddingBottom: 15,
								padding: 0,
								paddingRight: 15,
								color: '#333',
								fontSize: 14,
								...borderBottom()
							}}
							underlineColorAndroid="transparent"
						/>
						<TextInput
							onChangeText={(value) => this.setState({ depositBank: value })}
							placeholder="开户银行"
							value={depositBank}
							placeholderTextColor="#61676F"
							style={{
								paddingTop: 15,
								paddingBottom: 15,
								padding: 0,
								paddingRight: 15,
								color: '#333',
								fontSize: 14,
								...borderBottom()
							}}
							underlineColorAndroid="transparent"
						/>
						<TextInput
							onChangeText={(value) => this.setState({ bankAccount: value })}
							placeholder="银行卡号"
							value={bankAccount}
							placeholderTextColor="#61676F"
							style={{
								paddingTop: 15,
								paddingBottom: 15,
								padding: 0,
								paddingRight: 15,
								color: '#333',
								fontSize: 14,
								...borderBottom()
							}}
							underlineColorAndroid="transparent"
						/>
						<TextInput
							onChangeText={(value) => this.setState({ regAddress: value })}
							placeholder="注册地址"
							value={regAddress}
							placeholderTextColor="#61676F"
							style={{
								paddingTop: 15,
								paddingBottom: 15,
								padding: 0,
								paddingRight: 15,
								color: '#333',
								fontSize: 14,
								...borderBottom()
							}}
							underlineColorAndroid="transparent"
						/>
						<View style={{ height: 50, justifyContent: 'center', }}>
							<Radio
								style={{}}
								checked={isDefault}
								onChange={(value) => {
									this.setState({
										isDefault: value
									})
								}}
								label={'设为默认发票'}
							/>
						</View>
					</View>
					<View style={{ padding: 15 }}>
						<TouchableOpacity
							onPress={() => {
								this.hanfleOnPress()
							}}
							style={{
								paddingVertical: 14,
								paddingHorizontal: 20,
								backgroundColor: hotTextColor,
								borderRadius: 6,
								alignItems: 'center',
								justifyContent: 'center',
							}}
						>
							<Text style={{ fontSize: size(28), color: '#fff', lineHeight: size(30), }}>{this.props.children}</Text>
						</TouchableOpacity>
					</View>
				</KeyboardAvoidingView>
			</ScrollView >
		);
	}
}

export default pureRender(InvoicesForm)
